<template>
	<div class="sbDetail">
		<div class="inviteIndexItems" v-if="userStatus != 0 && userStatus!=1">
			<div class="inviteIndexItems_left">
				所属区域
			</div>
			<div class="inviteIndexItems_right" @click='froolShow = true'>
				<input type="text" value="" v-model='from.address' disabled placeholder="请输入" />
			</div>
		</div>
		<div class="inviteIndexItems">
			<div class="inviteIndexItems_left">
				服务类型
			</div>
			<div class="inviteIndexItems_right">
				<input type="text" value="" v-model='from.type' disabled placeholder="请输入" />
			</div>
		</div>
		<div class="inviteIndexItems" v-if='serverType == 1'>
			<div class="inviteIndexItems_left">
				服务老师
			</div>
			<div class="inviteIndexItems_right" @click="showSex = true; hideKeyboard()">
				<!-- <input type="text" value="" placeholder="请输入性别" /> -->
				<u--input v-model="from.teacher" disabled disabledColor="#ffffff" placeholder="请选择设备类型"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right" color='#c0c4cc'></u-icon>
			</div>
		</div>

		<div class="inviteIndexItems" v-if='serverType == 2'>
			<div class="inviteIndexItems_left">
				报修类型
			</div>
			<div class="inviteIndexItems_right" @click="showSexSB = true; hideKeyboard()">
				<!-- <input type="text" value="" placeholder="请输入性别" /> -->
				<u--input v-model="from.types" disabled disabledColor="#ffffff" placeholder="请选择设备类型"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right" color='#c0c4cc'></u-icon>
			</div>
		</div>
		<div class="inviteIndexItems" v-if='serverType == 2'>
			<div class="inviteIndexItems_left">
				设施/设备编号
			</div>
			<div class="inviteIndexItems_right">
				<input type="text" value="" v-model='from.number' placeholder="请输入" />
			</div>
		</div>
		<div class="inviteIndexItems" v-if='serverType == 2'>
			<div class="inviteIndexItems_left">
				故障描述
			</div>
			<div class="inviteIndexItems_right">
				<input type="text" value="" v-model='from.content' placeholder="请输入" />
			</div>
		</div>

		<div class="inviteIndexItems">
			<div class="inviteIndexItems_left">
				服务时间
			</div>
			<div class="inviteIndexItems_right">
				<input type="number" value="" v-model='from.time' disabled placeholder="请输入" />
			</div>
		</div>
		<div class="inviteIndexItems" style="height: 240rpx;">
			<div class="inviteIndexItems_left">
				备注
			</div>
			<div class="inviteIndexItems_right">
				<div class="invite_cont_yy">
					<textarea v-model='remark' placeholder="请填写备注(最多50字)" />
				</div>

			</div>
		</div>


		<!-- <div class="inviteUpdate">
			上传照片 </div>
		<div class="inviteUpdate_img">
			<div class="inviteUpdate_left" @click='UpImg(1)'>
				<image :src="from.image" mode="" v-if="from.image"></image>
				<image src="https://wx.sjcmhz.com/static/image/upload.png" mode="" v-else></image>
			</div>

		</div> -->

		<!--  -->
		<frool v-if="froolShow" :froolShow='froolShow' @confirm='FroolConfirm' @cancel='froolShow=false'></frool>
		<!-- btn -->
		<!-- 提交 -->
		<div class="inviteIndexItems_btn sbDetailbtn" @click='inviteSureEvent()'>
			提交
		</div>

		<u-action-sheet :show="showSex" :actions="actions" title="请选择" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
		<u-action-sheet :show="showSexSB" :actions="actionsSB" title="请选择" @close="showSexSB = false"
			@select="sexSelectSB">
		</u-action-sheet>
	</div>
</template>

<script>
	import frool from '@/pages/server/components/frool.vue'
	export default {
		components: {
			frool
		},
		data() {
			return {
				froolShow: false,
				from: {},
				showSex: false,
				showSexSB: false,
				equipment_id: '',
				actionsSB: [{
						name: '电脑',
					},
					{
						name: '屏幕',
					}, {
						name: '声卡',
					},
					{
						name: '麦克风',
					}, {
						name: '灯具',
					},
					{
						name: '无线耳机',
					}, {
						name: '手机',
					},
					{
						name: '杂项',
					}

				],
				// 电脑、屏幕、声卡、麦克风、灯具、无线耳机、手机、杂项
				// 美颜灯光：土豆(8:30~20:30)、多多(10:00～22:00)、白泽(8:30～20:30)、守守(11:00～23:00)、腾腾(9:30～21:30)
				// 保洁：专业保洁阿姨
				// 报修：专业维修师傅
				// 理发：到店安排、A技术总监、B技术总监
				// 声卡：宸宸(09:00～09:30)、林木(11:00～11:30)、轩轩(13:00～13:30)
				actions: [

				],
				actions0: [{
						name: '土豆(8:30~20:30)',
					},
					{
						name: '多多(10:00～22:00)',
					},
					{
						name: '白泽(8:30～20:30)',
					},
					{
						name: '守守(11:00～23:00)',
					},
					{
						name: '腾腾(9:30～21:30)',
					},
				],
				actions1: [{
						name: '到店安排',
					},
					{
						name: 'A技术总监',
					},
					{
						name: 'B技术总监',
					}
				],
				actions2: [{
						name: '宸宸(09:00～09:30)',
					},
					{
						name: '林木(11:00～11:30)',
					},
					{
						name: '轩轩(13:00～13:30)',
					}
				],
				typeList: [{
						name: '灯光/美颜'
					},
					{
						name: '声卡'
					}, {
						name: '理发'
					}, {
						name: '保洁/报修',
					},
					// {
					// 	name: '借衣服'
					// }
				],
				from: {

				},
				tabIndex: 0,
				serverType: 1,
				userStatus: ''
			}
		},
		onLoad(opt) {
			this.userStatus = uni.getStorageSync('userStatus')
			this.from = JSON.parse(opt.ite) || undefined
			this.from.type = this.typeList[this.from.tabIndex].name
			this.tabIndex = this.from.tabIndex
			this.serverType = this.from.num
			this.changeData(this.tabIndex)
			console.log("equipment_id", this.from, this.serverType)
		},
		methods: {
			changeData(v) {
				switch (v) {
					case 0:
						this.actions = this.actions0
						break;
					case 1:
						this.actions = this.actions2
						break;
					case 2:
						this.actions = this.actions1
						break;
					case 3:
						this.actions = []
						if (this.from.num == 2) {
							this.from.number = ''
						} else {
							this.from.number = ''
						}
						break;
					case 4:
						this.actions = []
						this.from.number = ''
						break;
				}


			},
			async getRoomEdits() {
				const {
					data
				} = await this.$request(this.$Api.roomEdits, {
					equipment_id: this.equipment_id
				}, "POST")
				if (data.code !== 0) return
				this.from = data.data
			},
			// 上传图片
			UpImg(index) {
				var that = this
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						that.thumbnail = tempFilePaths
						that.UpList(index, that.thumbnail)
					}
				});
			},
			UpList(index, file) {
				var that = this
				that.$utils.UpdataImg(file, (res) => {
					console.log("resssssss", res)
					that.$set(that.from, 'image', res[0])
				})
			},
			hideKeyboard() {

			},
			sexSelect(e) {
				console.log("e.name", e.name, )
				var that = this
				that.$set(that.from, 'teacher', e.name)
			},
			sexSelectSB(e) {
				console.log("e.name", e.name, )
				var that = this
				that.$set(that.from, 'types', e.name)
			},
			// 新增设备
			async inviteSureEvent() {
				const {
					data
				} = await this.$request(this.$Api.workPut, this.from, "POST")
				if (data.code !== 0) return
				uni.showToast({
					title: '预约成功',
					icon: 'none'
				})
				setTimeout((res) => {
					uni.navigateBack()
				}, 800)
			},

			async inviteSureEventAdd() {
				const {
					data
				} = await this.$request(this.$Api.roomAdd, this.from, "POST")
				if (data.code !== 0) return
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				})

				uni.navigateBack()
			},
			async FroolConfirm(e) {
				console.log('FroolConfirmFroolConfirm', e)
				// room_name:this.room_name,floor_name:this.floor_name,storey_name:this.storey_name
				this.from.address = e.floor_name + ' ' + e.storey_name + " " + e.room_name
				this.from.room_id = e.room_id
				this.from.storey_id = e.storey_id
				this.from.floor_id = e.floor_id
				// var params = {
				// 	anchor_id: this.anchor_id,
				// 	room_id: e.room_id,
				// 	storey_id: e.storey_id,
				// 	floor_id: e.floor_id,
				// }
			}
		},
	}
</script>

<style lang="less">
	.sbDetail {
		padding: 24rpx 0;
	}

	.sbDetailbtn {
		position: fixed;
		bottom: 0;
		background: #2D60FF;

	}

	.inviteUpdate {
		font-size: 30rpx;
		line-height: 94rpx;
		padding: 0 44rpx;


	}

	.inviteUpdate_img {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 0 22rpx;
		box-sizing: border-box;
		margin-bottom: 10rpx;
	}

	.inviteUpdate_left,
	.inviteUpdate_right {
		width: 294rpx;
		height: 224rpx;

		// float:left;
		image {
			width: 100%;
			height: 100%;
			background: #f5f5f5;

		}
	}

	.inviteIndexItems_btn {
		width: 750rpx;
		height: 100rpx;
		background: #9013FE;
		line-height: 100rpx;
		font-size: 30rpx;
		text-align: center;
		color: #fff;
	}

	.inviteIndexItems {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 750rpx;
		min-height: 100rpx;
		border-bottom: 1rpx solid #eee;
		background: #fff;
		padding: 0 44rpx;
		box-sizing: border-box;

		.inviteIndexItems_left {
			color: #494949;
			font-size: 30rpx;
			width: 240rpx;
		}

		.inviteIndexItems_right {
			color: #999999;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			width: calc(100% - 240rpx);
		}
	}

	.inviteIndexItems_title {
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 44rpx;
		font-size: 30rpx;

	}

	.invite_cont_yy {
		width: 100%;
		height: 224rpx;

		font-size: 28rpx;
		padding: 16rpx 22rpx;
		box-sizing: border-box;
		color: #666666;

		textarea {
			height: 100%;
			background: #F5F5F5;
			width: 100%;
			padding: 16rpx 22rpx;
			box-sizing: border-box;
		}
	}
</style>